<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no,
    initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!--<link rel="stylesheet" type="text/css" href="css/public/common.css"/>-->   
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="../../css/public/swiper.min.css">
	<title>家谱详情</title>
    <!-- Demo styles -->
    <style>
		#myCanvas{width: 90%;height:470px;margin: 10px 5%;}
        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color:#000;
            margin: 0;
            padding: 0;
        }
        header {
            width: 100%;
            height: 50px;
            background-color: rgb(242,242,242);
        }
        header .go-back {
            margin: 14px 10px;
            float: left;
            width: 25px;
        }
        header h4 {
            width: 90%;
            line-height: 50px;
            margin: 0;
            text-align: center;
        }
        .swiper-container {
            width: 95%;
            height: 490px;
            margin: 0 auto;
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
    </style>
</head>
<body>
<header>
    <a href="javascript:;" onclick="window.history.back()"><img src="../../images/back.png" class="go-back" alt=""/></a>
    <h4>家谱详情</h4>
</header>
<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
        	<canvas id="myCanvas" height="470">你的浏览器不支持canvas!</canvas>
        </div>
        <div class="swiper-slide">
        	这是家谱第二页
        </div>
        <div class="swiper-slide">这是家谱第三页</div>
        <div class="swiper-slide">这是家谱第四页</div>
        <div class="swiper-slide">这是家谱第五页</div>
    </div>
</div>

</body>
<script src="../../js/public/jquery-2.2.3.min.js"></script>
<script src="../../js/public/bootstrap.min.js"></script>
<!-- Swiper JS -->
<script src="../../js/public/swiper.jquery.min.js"></script>

<!-- Initialize Swiper -->
<script>
    var swiper = new Swiper('.swiper-container');
</script>
<script src="../../js/personal/bookCanvas.js"></script>
</html>